<template>
	<view class="content">
		<view class="app-title ac">
			<view class="fl" @click="back">
				<image class="back" src="/static/img/back.png"></image>
			</view>
			<view>应急记录</view>
		</view>
		<view style="height: 138rpx;"></view>

		<view class="select-query">
			<view class="select-calendar">
				<u-calendar v-model="show_calendar" :mode="modeCalendar" @change="changCalendar"></u-calendar>
				<u-button v-if="calendarData.length == 0" @click="show_calendar = true">开始时间 ~ 结束时间</u-button>
				<u-button v-else @click="show_calendar = true">{{calendarData[0]}} ~ {{calendarData[1]}}</u-button>
			</view>
			<view class="select-drop">
				<u-button @click="lineAndStationShow = true">{{lineLabel}} ~ {{stationLabel}}</u-button>
				<u-select v-model="lineAndStationShow" mode="mutil-column-auto" :list="lineAndStationList"
					@confirm="confirmLineAndStation"></u-select>
			</view>
			<view class="select-search">
				<u-search @search="queryConfirm()" @custom="queryConfirm()" placeholder="请输入相关现象" v-model="queryKeyword"
					shape="round" :clearabled="true" :show-action="false" action-text="搜索" :animation="true"
					input-align="center"></u-search>
			</view>
			<view class="select-button">
				<button @click="queryReset()">重置</button>
				<button @click="queryConfirm()">查询</button>
			</view>
		</view>

		<view class="info-area">
			<view class="info-list">
				<view class="info-item" v-if='emerList && emerList.length' v-for="(item,index) in emerList" :key="index"
					@click="goHistoryDetail(item,index)">
					<view class="item-header">
					</view>
					<view class="item-body">
						<view class="body-top">
							<view>
								<u-icon name="warning-fill" color="#5396e7"></u-icon>
								<text>{{item.faultTypeName}}</text>
							</view>
							<view>
								<text>{{item.lineName}}</text>
								<text>{{item.staName}}</text>
								<text>{{item.happenTime}}</text>
							</view>
							<view>{{item.content}}</view>
						</view>
						<hr />
						<view class="body-bottm">
							<view>
								<u-icon name="order"></u-icon>
								<text>接单</text>
								<text>{{item.receiveCount}}</text>
								<u-icon name="account"></u-icon>
								<text>到场</text>
								<text>{{item.arriveCount}}</text>
							</view>
							<u-steps :list="emergencyProcess" :current="item.processCode" mode="dot"
								active-color='#00aa47' un-active-color="#a2bdc6" class="emer-steps"></u-steps>
						</view>
					</view>
				</view>
			</view>
			<view class="emer-tip">没有更多报警了~</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				lineAndStationShow: false,
				lineAndStationList: [],
				show_calendar: false,
				modeCalendar: 'range',
				calendarData: [],
				queryKeyword: "",
				lineValue: "",
				stationValue: "",
				lineOptions: [],
				stationOptions: [],
				lineLabel: "线路",
				stationLabel: "车站",
				routeFlag: "",
				emerList: [],
				emergencyProcess: [{
						name: '告警'
					},
					// {
					// 	name: '调度发布'
					// },
					{
						name: '指挥发布'
					},
					// {
					// 	name: '接警'
					// },
					{
						name: '派单'
					},
					{
						name: '接单'
					},
					{
						name: '抢修'
					},
					{
						name: '待审核',
					},
					{
						name: '故障修复'
					}
				],
				param: ''
			}
		},
		onLoad(options) {
			this.routeFlag = options.routefrom;
			this.param = options.param
		},
		created() {},
		mounted() {
			this.initList();
			this.getLineAndStationData()
		},
		onBackPress(e) {
			this.back()
		},
		onReachBottom() {},
		methods: {
			back() {
				if (this.param) {

					uni.navigateTo({
						url: this.routeFlag == 'emerinfo' ? '/pages/emergency/emergencyInfo/index?param=process' :
							'/pages/index/index'
					});
				} else {
					uni.navigateTo({
						url: this.routeFlag == 'emerinfo' ? '/pages/emergency/emergencyInfo/index' :
							'/pages/index/index'
					});
				}
			},
			goHistoryDetail(item, index) {
				let params = {
					faultId: item.idK,
					planOrderId: item.planOrderId || '',
					armcode: item.armcode || '',
					content: item.content || '',
					...item
				};

				this.$store.state.faultOrderInfoGlobal = {
					happenTime: item.happenTime,
					lineName: item.lineName,
					staName: item.staName,
					faultTypeName: item.faultTypeName
				}

				this.$store.state.faultInfoGlobal = {
					lineName: item.lineName,
					staName: item.staName,
					content: item.content,
					processCode: item.processCode,
					faultTypeName: item.faultTypeName
				}
				console.log('params-----',params)
				if (this.param) {
					uni.navigateTo({
						url: "/pages/emergency/historyList/detail" + '?params=' + JSON.stringify(params) +
							'&param=process'
					});
				} else {

					uni.navigateTo({
						url: "/pages/emergency/historyList/detail" + '?params=' + JSON.stringify(params)
					});
				}
			},
			changCalendar(data) {
				this.calendarData = [data.startDate, data.endDate]
				this.initList()
			},
			confirmLineAndStation(options) {
				console.log('options', options)
				this.lineValue = options[0].value;
				this.lineLabel = options[0].label
				this.stationValue = options[1].value
				this.stationLabel = options[1].label
				this.initList()
			},
			getLineAndStationData() {
				this.fetch('GET', this.$store.state.baseEmerUrl + '/api/sys/line/findAll', {}, false).then((res) => {
					if (res.returnCode == "2004" && res.data) {
						let lineOptions = []
						lineOptions = res.data.map(item => {
							return {
								label: item.name,
								value: item.idK,
								children: []
							}
						})

						lineOptions.forEach((item, index) => {
							this.fetch('GET', this.$store.state.baseEmerUrl +
									'/pmsDict/station/getNameByLineId', {
										lineId: item.value
									}, false)
								.then((res) => {
									if (res.success && res.data) {
										let stationOptions = []
										stationOptions = res.data.map((mapItem) => {
											return {
												label: mapItem.name,
												value: mapItem.id
											}
										})
										lineOptions[index].children = stationOptions;
										this.lineAndStationList = lineOptions;
									}
								})
						})
					}

				})
			},
			dropLineChange(value) {
				this.stationLabel = '车站'
				this.stationValue = ''
				this.getStation(value)

				this.lineOptions.some((item) => {
					if (item.value == value) {
						this.lineLabel = item.label;
						return true
					}
				})
			},
			dropStationChange(value) {
				this.initList()

				this.stationOptions.some((item) => {
					if (item.value == value) {
						this.stationLabel = item.label;
						return true
					}
				})
			},
			queryConfirm() {
				this.initList()
			},
			queryReset() {
				this.calendarData = []
				this.lineValue = ""
				this.stationValue = ""
				this.queryKeyword = ""
				this.stationLabel = '车站'
				this.lineLabel = '线路'
				this.queryConfirm()
			},
			getStation(lineId = '') {
				let params = {
					lineId
				}
				this.fetch('GET', this.$store.state.baseEmerUrl +
						'/pmsDict/station/getNameByLineId',
						params,
						false)
					.then((res) => {
						if (res.returnCode == "2004" && res.data) {
							this.stationOptions = []
							for (let i = 0; i < res.data.length; i++) {
								this.stationOptions.push({
									label: res.data[i].stationName,
									value: res.data[i].stationId
								})
							}
						}
					})
			},
			getLine() {
				this.fetch('GET', this.$store.state.baseEmerUrl + '/api/sys/line/findAll', {},
						false)
					.then((
						res) => {
						if (res.returnCode == "2004" && res.data) {
							this.lineOptions = []
							for (let i = 0; i < res.data.length; i++) {
								this.lineOptions.push({
									label: res.data[i].name,
									value: res.data[i].idK
								})
							}
						}
					})
			},
			initList() {
				let params = {
					personId: this.getUserId(),
					level: "",
					type: 1,
					faultId: "",
					processCode: 8, // 查询维修历史用8
					startTime: this.calendarData[0] ? this.calendarData[0] + ' 00:00:00' : "",
					endTime: this.calendarData[1] ? this.calendarData[1] + ' 00:00:00' : "",
					lineId: this.lineValue || "",
					stationId: this.stationValue || "",
					content: this.queryKeyword || "",
				}
				this.fetch('GET', this.$store.state.baseEmerUrl + '/emergency/faultList',
						params, true)
					.then((
						res) => {
						if (res.returnCode == "2004" && res.data) {
							this.emerList = res.data
							for (let i = 0; i < this.emerList.length; i++) {
								this.emerList[i].happenTime = this.emerList[i].happenTime
									.substring(0, 19)
							}
						}
					})
			}
		}
	}
</script>

<style scoped lang="less">
	// /deep/.u-steps .u-steps__item {
	// 	min-width: 88upx;
	// }

	/deep/.u-steps__item__text--row {
		span {
			font-size: 24upx;
		}
	}

	/deep/.u-steps__item:nth-child(1) {
		min-width: 50upx;
	}

	/deep/.u-steps__item:nth-child(4) {
		min-width: 50upx;
	}

	/deep/.u-steps__item:nth-child(5) {
		min-width: 40upx;
	}

	/deep/.u-steps__item:nth-child(6) {
		min-width: 40upx;
	}

	/deep/.u-steps__item:nth-child(7) {
		min-width: 50upx;
	}

	.app-title {
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 99;
	}

	.select-query {
		margin-bottom: 100rpx;

		.select-search {
			width: 80%;
			margin: 0 auto;
		}

		.select-button {
			button {
				float: left;
				background-color: #b0d2ff;
				font-size: 26rpx;
				padding: 0 20rpx;
				height: 50rpx;
				line-height: 50rpx;
				margin-top: 20rpx;
			}

			button:nth-of-type(1) {
				margin-left: 200rpx;
			}

			button:nth-of-type(2) {
				margin-left: 130rpx;
			}

		}

	}

	.info-area {
		.info-list {
			width: 96%;
			margin: 0 auto;

			.info-item {
				box-shadow: -2upx -2upx 2upx rgba(0, 0, 0, 0.05), 2upx 2upx 4upx rgba(0, 0, 0, 0.05);
				border-radius: 3upx;
				background: #e7f5ff;
				margin-bottom: 25upx;

				.item-header {
					width: 100%;
					height: 15upx;
					background-color: #b0d2ff;
					border-radius: 3upx 3upx 0 0;

				}

				.item-body {
					padding: 10upx;
					border-radius: 3upx;

					.body-top {
						margin-bottom: 24upx;

						view:nth-child(1) {
							margin-bottom: 10upx;

							text:nth-of-type(1) {
								font-weight: bold;
								padding-left: 6upx;
							}

						}

						view:nth-child(2) {
							position: relative;
							margin-bottom: 15upx;
							font-size: 25upx;

							text:nth-of-type(1) {
								margin-right: 35upx;
								font-weight: bold;
							}

							text:nth-of-type(2) {
								font-weight: bold;
							}

							text:nth-of-type(3) {
								position: absolute;
								right: 10upx;
								color: #81858e;
							}
						}

						view:nth-child(3) {
							font-size: 25upx;
							color: #b2bbc2;
						}


					}

					hr {
						width: 90%;
						margin: 0 auto;
						border: 1px dashed #e0eefb;
					}

					.body-bottm {
						margin-top: 24upx;

						view:nth-child(1) {
							margin-bottom: 20upx;

							text:nth-of-type(1) {
								color: #a5b1bd;
								padding-left: 10upx;
								padding-right: 14upx;
							}

							text:nth-of-type(2) {
								margin-right: 54upx;
								color: #6d7b86;
							}

							text:nth-of-type(3) {
								color: #a5b1bd;
								padding-left: 10upx;
								padding-right: 14upx;
							}

							text:nth-of-type(4) {
								color: #6d7b86;
							}
						}

						.emer-steps {
							margin-bottom: 30upx;
						}
					}

				}

			}
		}

		.emer-tip {
			margin-top: 40upx;
			text-align: center;
			color: #8a8a8a;
			// font-weight: 600;
			font-size: 34upx;
		}
	}
</style>